<body>
  <div id="app">
    <!-- 一般情况下，组件与组件在切换时，会触发组件的销毁和重建(input) -->
    <!-- 可以通过 vue 提供的 keep-alive 组件 缓存组件, 避免组件的重新渲染 -->
    <!-- 没有触发销毁和重建，但是触发了activated 和 deactivated钩子函数 -->
    <!-- <component :is="type"></component> -->
    <keep-alive>
      <component :is="type"></component>
    </keep-alive>
    <ul>
      <li @click="goPage('home')">首页</li>
      <li @click="goPage('kind')">分类</li>
      <li @click="goPage('cart')">购物车</li>
      <li @click="goPage('user')">我的</li>
    </ul>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  const Home = { template: '<div>首页组件<input /></div>', activated() {
    console.log('Home activated')
  }, deactivated() {
    console.log('Home deactivated')
  }, }
  const Kind = { template: '<div>分类组件<input /></div>', activated() {
    console.log('Kind activated')
  }, deactivated() {
    console.log('Kind deactivated')
  }, }
  const Cart = { template: '<div>购物车组件<input /></div>', activated() {
    console.log('Cart activated')
  }, deactivated() {
    console.log('Cart deactivated')
  }, }
  const User = { template: '<div>我的组件<input /></div>', activated() {
    console.log('User activated')
  }, deactivated() {
    console.log('User deactivated')
  }, }
  new Vue({
    el: '#app',
    data: {
      type: 'home'
    },
    components: {
      home: Home,
      kind: Kind,
      cart: Cart,
      user: User,
    },
    methods: {
      goPage (type) {
        this.type = type
      }
    }
  })
</script>